<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作节点——新增</title>
    <style type="text/css">

    </style>
</head>
<body>

    <div id="container" >
        <ul id="list">
            <li>大一</li>
            <li id="er">大二</li>
            <li>大三</li>
            <li>大四</li>
            <li>大五</li>
        </ul>
    </div>
    <button type="button" onclick="addElement()">点击我，进行增加</button>
<script type="text/javascript">

    function addElement(){
        // 执行具体的代码

        // 需要有一个新元素
        // 1、创建一个新元素
        let li = document.createElement("li") ;
        console.log( li ) ;
        li.style.backgroundColor = 'red' ;
        li.innerHTML = "我是新添加的元素" ;
        console.log( li  ) ;
        // 2、复制一个元素

        let source = document.querySelector("#list") ;
        let target = source.cloneNode( true ) ;
        console.log( target ) ;


        // 添加到哪里去

        // 父元素.appendChild( 新添加的元素 )
        let ul = document.querySelector("#list") ;
        // ul.appendChild( li ) ;

        // element.insertBefore( 新建的元素 , 引用元素 )

        let refElement = document.querySelector("#er") ;
        ul.insertBefore( li , refElement ) ;
    }



</script>


</body>
</html>